<template>
  <input type="radio" name="comp" value="1" v-model="current">comp1
  <input type="radio" name="comp" value="2" v-model="current">comp2
  <!-- 默认情况下，KeepAlive 会缓存内部的任何组件实例，可以通过 include 和 exclude 来定制该行为。这两个 prop 的值可以是一个以英文逗号分隔的字符串，一个正则表达式，或是包含这两种类型的一个数组。它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式的在组件内部声明一个 name 选项 -->
  <KeepAlive :include="['comp1']">
    <component :is="active" />
  </KeepAlive>
</template>

<script setup>
import { ref, computed } from 'vue'
import KeepAliveComp1 from '../components/KeepAliveComp1.vue'
import KeepAliveComp2 from '../components/KeepAliveComp2.vue'

const current = ref('1')
const active = computed(() => {
  if (current.value === '1') return KeepAliveComp1
  else return KeepAliveComp2
})

</script>

<style scoped>

</style>